<template>
  <div class="profile-wrapper">
    <div class="profile-layout">
      <!-- 左侧个人信息面板 -->
      <div class="sidebar">
        <div class="user-panel">
          <div class="panel-header">
            <span>个人信息</span>
          </div>
          <div class="user-avatar">
            <userAvatar/>
            <h4 class="username">{{ user.userName || '未设置' }}</h4>
          </div>
          <div class="user-details">
            <div class="detail-item">
              <div class="item-icon">
                <svg-icon icon-class="phone"/>
              </div>
              <div class="item-content">
                <div class="item-label">手机号码</div>
                <div class="item-value">{{ user.phonenumber || '未设置' }}</div>
              </div>
            </div>
            <div class="detail-item">
              <div class="item-icon">
                <svg-icon icon-class="email"/>
              </div>
              <div class="item-content">
                <div class="item-label">电子邮箱</div>
                <div class="item-value">{{ user.email || '未设置' }}</div>
              </div>
            </div>
            <div class="detail-item">
              <div class="item-icon">
                <svg-icon icon-class="user"/>
              </div>
              <div class="item-content">
                <div class="item-label">当前身份</div>
                <div class="item-value">{{ roleGroup || '无' }}</div>
              </div>
            </div>
            <div class="detail-item">
              <div class="item-icon">
                <svg-icon icon-class="date"/>
              </div>
              <div class="item-content">
                <div class="item-label">创建日期</div>
                <div class="item-value">{{ user.createTime || '未知' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="content">
        <div class="content-panel">
          <div class="panel-header">
            <span>账户设置</span>
          </div>
          <div class="tab-container">
            <div class="tab-header">
              <div
                :class="{ active: activeTab === 'userinfo' }"
                class="tab-item"
                @click="activeTab = 'userinfo'">
                基本资料
              </div>
              <div
                :class="{ active: activeTab === 'resetPwd' }"
                class="tab-item"
                @click="activeTab = 'resetPwd'"
              >
                修改密码
              </div>
            </div>
            <div class="tab-content">
              <div v-if="activeTab === 'userinfo'" class="tab-pane">
                <userInfo :user="user"/>
              </div>
              <div v-if="activeTab === 'resetPwd'" class="tab-pane">
                <resetPwd/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import {getUserProfile} from "@/api/system/user";

export default {
  name: "Profile",
  components: { userAvatar, userInfo, resetPwd },
  data() {
    return {
      user: {},
      roleGroup: '',
      postGroup: {},
      activeTab: "userinfo"
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.svg-icon {
  margin: 0 !important;
}

.profile-wrapper {
  min-height: 100%;
  padding: 20px;
  background-color: #f5f7fa;

  .profile-layout {
    display: flex;
    gap: 20px;

    .sidebar {
      width: 400px;
      flex-shrink: 0;

      .user-panel {
        background-color: #fff;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

        .panel-header {
          padding: 14px 16px;
          background-color: #f9f9f9;
          border-bottom: 1px solid #eee;

          span {
            color: #333;
            font-size: 15px;
            font-weight: 500;
          }
        }

        .user-avatar {
          padding: 20px 0;
          text-align: center;
          border-bottom: 1px solid #f0f0f0;

          .username {
            margin: 10px 0 0;
            font-size: 16px;
            color: #333;
            font-weight: 500;
          }
        }

        .user-details {
          padding: 12px;

          .detail-item {
            display: flex;
            padding: 12px;
            border-radius: 4px;
            transition: all 0.2s;

            &:hover {
              background-color: #f9fafc;
            }

            .item-icon {
              width: 32px;
              height: 32px;
              border-radius: 4px;
              background-color: #f2f6fc;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 12px;

              svg-icon {
                font-size: 16px;
                color: #409EFF;
              }
            }

            .item-content {
              flex: 1;

              .item-label {
                font-size: 12px;
                color: #909399;
                margin-bottom: 3px;
              }

              .item-value {
                font-size: 14px;
                color: #333;
                font-weight: 500;
                word-break: break-all;
              }
            }
          }
        }
      }
    }

    .content {
      flex: 1;

      .content-panel {
        background-color: #fff;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        height: 100%;

        .panel-header {
          padding: 14px 16px;
          background-color: #f9f9f9;
          border-bottom: 1px solid #eee;

          span {
            color: #333;
            font-size: 15px;
            font-weight: 500;
          }
        }

        .tab-container {
          padding: 0;

          .tab-header {
            display: flex;
            border-bottom: 1px solid #eee;

            .tab-item {
              padding: 12px 20px;
              font-size: 14px;
              color: #606266;
              cursor: pointer;
              position: relative;
              transition: all 0.2s;

              &:hover {
                color: #409EFF;
              }

              &.active {
                color: #409EFF;
                font-weight: 500;

                &:after {
                  content: '';
                  position: absolute;
                  bottom: -1px;
                  left: 0;
                  right: 0;
                  height: 2px;
                  background-color: #409EFF;
                }
              }
            }
          }

          .tab-content {
            padding: 20px;

            .tab-pane {
              animation: fadeIn 0.2s ease-in-out;
            }
          }
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 992px) {
  .profile-layout {
    flex-direction: column;

    .sidebar {
      width: 100% !important;
    }
  }
}

@media screen and (max-width: 768px) {
  .profile-wrapper {
    padding: 12px;
  }

  .detail-item {
    padding: 10px !important;
  }

  .tab-header {
    .tab-item {
      flex: 1;
      text-align: center;
      padding: 10px !important;
    }
  }
}
</style>
